<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		     功能: 1. 应用于表格中单元格【栅格元素】
			      2.行内元素与行内块元素对齐方式
				  理解: 文本和图片对齐方式【垂直居中】
				  元素种类: 行内元素  块级元素  行内块元素
				  
				  行内元素: span   a
				  特点: 在一行内显示  不可设置宽高
				  
				  块级元素: div   p
				  特点: 独占一行 可设宽高
				  
				  行内块元素: img
				  特点: 在一行内显示 可设宽高-->
				  
				<!-- 页面组成: 元素之间嵌套生成
				     三种元素相互嵌套  √   嵌套根据元素特点页面混乱
					 嵌套条件 1. 在一行内显示【效果】
					            块套行  √
								行套行  √
								行套块  √  增加条件 块添加宽高  造成页面布局混乱
								块套块  √
					嵌套条件 2: 独占一行【效果】
								块套行  √  推荐
								行套行  ×
								行套块  ×  混乱
								块套块  √
								-->
				  <style>
					  /* 抓每个img 派生{后代}选择器: 
					               抓取父元素中所有{后代} 子元素 【元素嵌套特点】
									
									伪类选择器: 
									特点: 在选择器后 过滤复合特定条件某个元素
									:nth-child(): 选中父元素中第N个
									符合条件: p中包含4个img
									
								id选择器: 主要抓取父级元素
								类选择器: 主要抓取父元素中某个子元素 微调*/
						p img.baseline{
							vertical-align: baseline;
						}
						p img.top{
							vertical-align: top;
						}
						p img.middle{
							vertical-align: middle;
							/* vertical-align 和 text-align区别
							   区别: ① 属性值不同
							        ②vertical-align操作文本和图片垂直问题
									 text-align操作文本左右和居中以及两边对齐*/
						}
						p img.bottom{
							vertical-align: bottom;
						}
						
					
					 
				  </style>
	</head>
	<body>
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>爱丽丝<img class="baseline" src= "img/1.png" alt="爱丽丝" height="100px" width="100px"";/>基线对齐</p>
		<p>莉音<img class="top" src="img/2.png" alt="莉音"  height="100px" width="100px"/>顶部对齐</p>
		<p>菲比<img class="middle" src="img/3.png" alt="菲比"  height="100px" width="100px"/>中间对齐</p>
		<p>小春<img class="bottom" src="img/4.png" alt="小春"  height="100px" width="100px"/>底部对齐</p>
		
		<!-- 垂直方向属性  4个属性值 -->
		
		<!-- <span>行内元素<div style="border: 1px solid red; height: 1000px; width: 1000px;">块元素</div></span> -->
		
		
		
	</body>
</html>